<template>
  <div>
    <i class="mini_btn lt" @click="back">
      <img src="@/assets/back.png" alt="">
    </i>
    <router-link class="mini_btn home" to="/home">
      <img src="@/assets/home.png" alt="">
    </router-link>
    <div class="swipe">
      <mt-swipe :show-indicators="false">
        <mt-swipe-item
        v-for="(img, index) of prod.prodImg"
        :key="index"
        ><img :src="img.image" alt=""></mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="info">
      <h3>{{ prod.name }}</h3>
      <div class="desc">
        <span>{{ prod.info }}</span>
        <span>{{ prod.desc }}</span>
      </div>
      <div class="price">￥<span>{{ prod.price}}</span></div>
      <div class="count">
        <span>已选：</span>
        <i ><em>{{ count }}</em>件</i>
        <b @click="showModal" />
      </div>
    </div>
    <div class="add_to_cart">
      <div class="icon save">
        <i>&#xe63f;</i>
        <span>收藏</span>
      </div>
      <div class="icon cart">
        <mt-badge
          size="small"
          type="error"
          class="badge"
          v-show="allCount !== 0"
        >{{ allCount }}</mt-badge>
        <i>&#xe6d5;</i>
        <router-link tag="span" to="/cart">购物车</router-link>
      </div>
      <div class="btn">
        <button class="buy">立即购买</button>
        <button class="to_cart" @click="addToCart({prod, count})">加入购物车</button>
      </div>
    </div>
    <!-- 模态框 -->
    <div class="modal" v-show="isShow">
      <div class="mask"></div>
      <div class="content">
        <div class="content-info">
          <img :src="prod.img" alt="" class="thumb">
          <div class="desc">
            <h4>{{ prod.name }}</h4>
            <span>￥<i>699</i></span>
          </div>
          <div class="close" @click="closeModal">
            <img src="@/assets/close.png" alt="">
          </div>
        </div>
        <div class="count">
          <h5>数量</h5>
          <span @click="dec">-</span>
          <span>{{ count }}</span>
          <span @click="count++">+</span>
        </div>
        <div class="button">
          <button class="buy">立即购买</button>
          <button class="to_cart" @click="add({prod, count})">加入购物车</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'

export default {
  name: 'Details',
  data () {
    return {
      isShow: false,
      count: 1
    }
  },
  props: ['id', 'prod'],
  computed: {
    ...mapGetters(['allCount'])
  },
  methods: {
    dec (e) {
      console.log(this.count)
      if (this.count !== 1) {
        this.count = this.count - 1
      }
    },
    back () {
      this.$router.go(-1)
    },
    showModal () {
      this.isShow = true
    },
    closeModal () {
      this.isShow = false
    },
    ...mapMutations(['addToCart']),
    add ({prod, count}) {
      this.addToCart({prod, count})
      this.closeModal()
    }
  }
}
</script>

<style lang="scss" scoped>
  @font-face {
    font-family: 'iconfont';  /* project id 932152 */
    src: url('//at.alicdn.com/t/font_932152_y3jv6nmolt9.eot');
    src: url('//at.alicdn.com/t/font_932152_y3jv6nmolt9.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_932152_y3jv6nmolt9.woff') format('woff'),
    url('//at.alicdn.com/t/font_932152_y3jv6nmolt9.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_932152_y3jv6nmolt9.svg#iconfont') format('svg');
  }
  .mini_btn {
    width: 48px;
    height: 48px;
    position: fixed;
    top: 0;
    z-index: 9999;
    img {
      display: block;
      width: 48px;
      height: 48px;
    }
  }
  .back {
    left: 0;
  }
  .home {
    right: 0;
  }
  .swipe {
    width: 375px;
    height: 375px;
    border-bottom: 1px solid #eee;
    img {
      width: 375px;
      height: 375px;
      vertical-align: top;
    }
  }
  .info {
    padding: 11px 14px 0 14px;
    h3 {
      margin-bottom: 3px;
      font-size: 16px;
      color: #333;
      font-weight: 600;
    }
    .desc {
      line-height: 18px;
      font-size: 13px;
      overflow-wrap: break-word;
      white-space: pre-wrap;
      span:nth-of-type(1) {
        color: rgb(182, 9, 9);
      }
      span:nth-of-type(2) {
        color: #999;
      }
    }
    .price {
      height: 31px;
      color: rgb(182, 9, 9);
      line-height: 31px;
      font-size: 12px;
      margin: 5px 0 8px 0;
      span {
        font-size: 24px;
      }
    }
    .count {
      padding: 10px 0;
      background: url(../assets/right_arrow.png) no-repeat right center;
      background-size: 12px 12px;
      font-size: 12px;
      line-height: 12px;
      span {
        color: #999;
      }
      i {
        color: #333;
      }
      b {
        float: right;
        width: 50%;
        height: 12px;
      }
    }
  }
  .add_to_cart {
    position: fixed;
    display: flex;
    bottom: 0;
    right: 0;
    height: 53px;
    box-sizing: border-box;
    width: 100%;
    padding-right: 7px;
    border-top: 1px solid rgb(191, 191, 192);
    justify-content: space-around;
    .icon {
      width: 62.5px;
      margin-left: 2px;
      height: 52px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: rgb(122, 122, 122);
      position: relative;
      .badge {
        padding: 0;
        margin: 0;
        width: 20px;
        height: 20px;
        position: absolute;
        top: -5px;
        right: 10px;
        border-radius: 10px;
        line-height: 20px;
      }
      i {
        font-size: 20px;
        font-family: 'iconfont';
        margin-bottom: 2px;
      }
      span {
        line-height: 15px;
        font-size: 10px;
      }
    }
    .btn {
      flex: 1;
      display: flex;
      justify-content: space-around;
      align-items: center;
      button {
        width: 46%;
        height: 32px;
        border: none;
        border-radius: 26px;
        font-size: 14px;
        line-height: 32px;
        color: white;
        background-color: rgb(182, 9, 9);
      }
      .to_cart {
        background-color: rgb(171, 138, 89);
      }
    }
  }
  .modal {
    .mask {
      width: 100%;
      height: 100%;
      background-color: #000;
      position: fixed;
      top: 0;
      right:0;
      z-index: 999;
      opacity: 0.5;
    }
    .content {
      width: 100%;
      height: 70%;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      background-color: #fff;
      position: fixed;
      bottom: 0;
      right: 0;
      z-index: 1000;
      .content-info {
        height: 70px;
        padding: 14px;
        .thumb {
          display: block;
          width: 68px;
          height: 68px;
          border: 1px solid rgb(232, 232, 232);
          float: left;
        }
        .desc {
          float: left;
          margin-left: 10px;
          h4 {
            font-size: 15px;
            color: rgb(51, 51, 51);
            padding-top: 15px;
            line-height: 15px;
          }
          span {
            display: block;
            margin-top: 5px;
            font-size: 14px;
            color: rgb(182, 9, 9);
            i {
              font-size: 19px;
            }
          }
        }
        .close {
          width: 11px;
          height: 11px;
          position: absolute;
          top: 12px;
          right: 12px;
          img {
            display: block;
            width: 11px;
            height: 11px;
          }
        }
      }
      .count {
        padding-bottom: 20px;
        padding-left: 14px;
        height: 44px;
        h5 {
          margin-bottom: 8px;
          color: rgb(153, 153, 153);
          font-size: 14px;
        }
        span {
          float: left;
          display: block;
          width: 30px;
          height: 20px;
          line-height: 20px;
          font-size: 18px;
          color: rgb(153, 153, 153);
          border: 1px solid rgb(153, 153, 153);
          border-right: none;
          text-align: center;
        }
        span:nth-of-type(2) {
          font-size: 13px;
        }
        span:nth-of-type(3) {
          border-right: 1px solid rgb(153, 153, 153);
        }
      }
      .button {
        box-sizing: border-box;
        width: 100%;
        height: 42px;
        padding: 0 14px;
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        button {
          width: 47%;
          height: 32px;
          border: none;
          line-height: 32px;
          border-radius: 26px;
          text-align: center;
          font-size: 14px;
          color: #fff;
          vertical-align: middle;
        }
        .buy {
          background-color: rgb(182, 9, 9);
        }
        .to_cart {
          background-color: rgb(171, 138, 89);
        }
      }
    }
  }
</style>
